<template>
  <div class="upload-preview">
    <el-table class="upload-table" :data="fileList" size="small">
      <el-table-column prop="fileName" min-width="400px" label="附件名称"></el-table-column>
      <el-table-column label="操作" align="left" min-width="220px">
        <template slot-scope="{ row, $index }">
          <el-button @click="handleDownload(row)" :type="btnType" :plain="btnType !== 'text'" size="mini">下载</el-button>
          <el-button @click="handlePreview(row)" :type="btnType" :plain="btnType !== 'text'" size="mini">预览</el-button>
          <el-button @click="handleRemoveFile($index)" :type="btnType" :plain="btnType !== 'text'" size="mini" v-if="showDel">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <previewDialog :visible.sync="previewDialog.visible" :filePath="previewDialog.fileURL"></previewDialog>
  </div>
</template>

<script>
import * as fileApi from "@/api/file";
import previewDialog from "./components/previewDialog";
export default {
  name: "uploadPreview",
  components: {
    previewDialog,
  },
  props: {
    fileList: {
      type: Array,
      default: () => [],
    },
    showDel: {
      type: Boolean,
      default: false,
    },
    btnType: {
      type: String,
      default: "primary",
    },
  },
  data() {
    return {
      previewDialog: {
        fileURL: "",
        visible: false,
      },
    };
  },
  watch: {},
  computed: {},
  created() {},
  mounted() {},
  methods: {
    handleDownload(row) {
      fileApi.download({
        downloadFileName: row.fileName,
        filePath: row.fileUrl,
      });
    },
    handleRemoveFile(index) {
      this.$emit("remove-file", index);
    },
    handlePreview(row) {
      // console.log(row);
      this.previewDialog = {
        visible: true,
        fileURL: row.fileUrl,
      };
    },
  },
};
</script>
<style lang="less" scoped>
.upload-table {
  /deep/.el-table__header-wrapper th.el-table__cell {
    height: 35px;
  }
  /deep/.el-table__header-wrapper {
    display: none;
  }
}
</style>
